<template>

	<div class="main">
		<div class="BlueBanner">
		</div>
		<el-row class="card content">
			<el-col :span="12">
				<div class="">
					<img src="../pic/1.jpg"
						class="login_img" />
				</div>
			</el-col>
			<el-col :span="12">
				<div class="biaodan">
					<el-tabs v-model="activeName">
						<el-tab-pane label="账户登录" name="first">
							<div class="one">
								<div class="tips">
									手机号/邮箱
								</div>
								<input placeholder="请输入手机号/邮箱" v-model="form.account" clearable class="input1"
									id="selectform" spellcheck="false" />
							</div>
							<input type="text" style="visibility: hidden;" />
							<div class="one">
								<div class="tips">
									密码
								</div>
								<input placeholder="请输入密码" v-model="form.password" show-password class="input1"
									type="password" />
							</div>
							<div class="register" @click="jumpTo()">免费注册</div>
							<div style="margin-top:0.307292rem;text-align: left;">
								<el-button type="primary" class="submit btn1" :loading="flagLoading" @click="login()"
									@keypress="keyDown()">立即登录</el-button>
							</div>
						</el-tab-pane>

						<el-tab-pane label="验证码登录" name="second">
							<div class="one">
								<div class="tips">
									手机号
								</div>
								<input placeholder="请输入手机号" v-model="form.phoneNumberOrEmail" clearable class="input1"
									id="selectform" spellcheck="false" />
							</div>
							<input type="text" style="visibility: hidden;" />
							<div class="one">
								<div class="tips">
									验证码
								</div>
								<div class="container">
									<input placeholder="请输入短信验证码" v-model="form.code" show-password class="input1"
										type="text" />
									<button @click="getcode()">发送验证码</button>
								</div>

							</div>
							<div class="register" @click="jumpTo()">免费注册</div>
							<div style="margin-top:0.307292rem;text-align: left;">
								<el-button type="primary" class="submit btn1" :loading="flagLoading"
									@click="loginorther()" @keypress="keyDown()">立即登录</el-button>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</el-col>
		</el-row>
		
	</div>

</template>
<script>
	import sha from '../common/sha1';
	export default {
		data() {
			return {
				form: {
					password: "",
					account: "",
					phoneNumberOrEmail: "",
					code: "",
				},
				flagLoading: false,
				activeName: 'first',
				codei: 0,
			}
		},
		methods: {
			//测试
			getcode() {
				//邮箱正则
				// let emailReg=/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
				//手机号正则
				let phoneReg = /^(?:(?:\+|00)86)?1\d{10}$/
				let time = 60 //计时时间
				if (this.form.phoneNumberOrEmail == "") {
					this.$notify.error({
						title: "失败",
						message: "手机号不可为空"
					})
					return
				}
				//正则匹配
				// else if(emailReg.exec(this.form.phoneNumberOrEmail)){
				//     console.log('邮箱');
				//     this.axiosUrl=`${this.baseURL}/api/get-register-code?email=${this.form.phoneNumberOrEmail}`
				// }
				else if (phoneReg.exec(this.form.phoneNumberOrEmail)) {
					console.log('手机');
					this.axiosUrl =
						`${this.baseURL}/api/get-phone-register-code?phoneNumber=${this.form.phoneNumberOrEmail}&i=${this.codei}`
				} else {
					this.$notify.error({
						title: "失败",
						message: "格式错误"
					})
					return
				}
				this.$axios.get(this.axiosUrl).then(res => {
					if (res.data.status == 200) {
						this.$notify.success({
							title: "验证码已发送至您的手机",
							message: "一分钟后可再次获取"
						})
						this.count = time
						this.codeBtnDisabled = true
						let timer = setInterval(() => {
							if (this.count > 0) {
								this.count--
							} else {
								this.codeBtnDisabled = false
								clearInterval(timer) //清除定时器
							}
						}, 1000)
					} else {
						this.$notify.error({
							title: "获取失败",
							message: res.data.msg
						})
					}
				})
			},
			//测试
			loginorther() {
				sessionStorage.setItem('limitselect', 0)
				sessionStorage.setItem('Optimalselect', 0)
				let isFilling
				this.flagLoading = true //button loading状态

				this.$axios.post(
						`${this.baseURL}/sysAdmin/phoneLogin?phone=${this.form.phoneNumberOrEmail}&code=${this.form.code}`)
					.then(res => {
						if (res.data.status == 200) {
							this.$notify.success({
								title: "登录成功",
								message: res.data.msg
							})
							// console.log(res.data.data);
							this.resetSetItem('username', JSON.stringify(res.data.data
								.username)) //main.js中重定义的setItem方法 用以在Home.vue中监听Storage变化
							sessionStorage.setItem('isFilling', res.data.data.isFilling)
							sessionStorage.setItem('loginId', res.data.data.id)
							sessionStorage.setItem('provinceId', res.data.data.provinceId)
							sessionStorage.setItem('token', res.data.token)
							// sessionStorage.setItem('isActivation',res.data.data.isActivation)
							console.log(res.data.data.isActivation)
							let username = JSON.parse(sessionStorage.username)
							//1、获取用户填报准备页面数据
							this.$axios.get(`${this.baseURL}/proInfoController/getMyProInfo?username=${username}`)
								.then(res => {
									if (res.data.status == 200) {
										if (res.data.data.username == null) {
											sessionStorage.setItem('preparafrom', 0)
										} else {
											console.log(res.data.data)
											sessionStorage.setItem('preparafrom', JSON.stringify(res.data.data))
										}
									}
								})
							//2、获取登录用户成绩信息
							isFilling = res.data.data.isFilling
							// this.flagLoading = false
							// console.log(username);
							this.$axios.post(`${this.baseURL}/scoreInfo/getScoreInfoByUsername?username=${username}`)
								.then(res => {
									if (res.data.status == 200) {
										if (res.data.data == '没有此数据') {
											sessionStorage.setItem('form', 1)
										} else {
											sessionStorage.setItem('form', JSON.stringify(res.data.data))
										}
										// console.log(res.data);
										// console.log(this.baseURL);
										// if(isFilling==1){
										//   this.$router.push('/Finalscheme')
										// }
										// else{
										//   this.$router.push('/Preparationforfilling')
										// }
										this.$router.push('/informationfilling')
									}
								})
								.catch(err => {
									console.log(err);
									//若form为1则说明该用户还未填写成绩信息
									sessionStorage.setItem('form', 1)
									this.$router.push('/informationfilling')
								})

						} else {
							this.flagLoading = false
							// notify提示已写在main.js中全局拦截器内 对401状态码拦截并返回至登录页 此处无需重复书写提示
						}
					})
					.catch(err => {
						// console.log('二处激发');
						// this.flagLoading = false
						// this.$notify.error({
						//   title:"失败",
						//   message:err
						// })
					})
			},
			keyDown(e) {
				//如果是回车则执行登录方法
				// console.log(this.activeName)
				if (this.activeName == 'first' && e.keyCode == 13) {
					this.login();
				} else if (this.activeName == 'second' && e.keyCode == 13) {
					this.loginorther()
				}
			},
			login() {
				sessionStorage.setItem('limitselect', 0)
				sessionStorage.setItem('Optimalselect', 0)
				sessionStorage.setItem('secret', this.form.password)
				let password = sha.sha1(this.form.password)
				let isFilling
				this.flagLoading = true //button loading状态

				this.$axios.post(
						`${this.baseURL}/sysAdmin/login?username=${this.form.account}&password=${password}`)
					.then(res => {
						if (res.data.status == 200) {
							this.$notify.success({
								title: "登录成功",
								message: res.data.msg
							})
							// console.log(res.data.data);
							this.resetSetItem('username', JSON.stringify(res.data.data
								.username)) //main.js中重定义的setItem方法 用以在Home.vue中监听Storage变化
							sessionStorage.setItem('isFilling', res.data.data.isFilling)
							sessionStorage.setItem('time', res.data.data.time)
							sessionStorage.setItem('loginId', res.data.data.id)
							sessionStorage.setItem('provinceId', res.data.data.provinceId)
							sessionStorage.setItem('token', res.data.token)
							sessionStorage.setItem('year', res.data.data.year)
							sessionStorage.setItem('isActivation', res.data.data.isActivation)
							sessionStorage.setItem('isTest', res.data.data.isTest)
							let username = JSON.parse(sessionStorage.username)
							//1、获取用户填报准备页面数据
							this.$axios.get(`${this.baseURL}/proInfoController/getMyProInfo?username=${username}`)
								.then(res => {
									if (res.data.status == 200) {
										if (res.data.data.username == null) {
											sessionStorage.setItem('preparafrom', 0)
										} else {
											console.log(res.data.data)
											sessionStorage.setItem('preparafrom', JSON.stringify(res.data.data))
										}
									}
								})
							//2、获取登录用户成绩信息
							isFilling = res.data.data.isFilling
							// this.flagLoading = false
							// console.log(username);
							this.$axios.post(`${this.baseURL}/scoreInfo/getScoreInfoByUsername?username=${username}`)
								.then(res => {
									if (res.data.status == 200) {
										if (res.data.data == '没有此数据') {
											sessionStorage.setItem('form', 1)
										} else {
											sessionStorage.setItem('form', JSON.stringify(res.data.data))
											sessionStorage.setItem('firstform', JSON.stringify(res.data.data))
										}
										// console.log(res.data);
										// console.log(this.baseURL);
										// if(isFilling==1){
										//   this.$router.push('/Finalscheme')
										// }
										// else{
										//   this.$router.push('/Preparationforfilling')
										// }
										this.$router.push('/informationfilling')
									}
								})
								.catch(err => {
									console.log(err);
									//若form为1则说明该用户还未填写成绩信息
									sessionStorage.setItem('form', 1)
									this.$router.push('/informationfilling')
								})

						} else {
							this.flagLoading = false
							// notify提示已写在main.js中全局拦截器内 对401状态码拦截并返回至登录页 此处无需重复书写提示
						}
					})
					.catch(err => {
						// console.log('二处激发');
						// this.flagLoading = false
						// this.$notify.error({
						//   title:"失败",
						//   message:err
						// })
					})

			},
			jumpTo() {
				//设置session为0，即访问people。vue时为注册而非修改
				sessionStorage.setItem('editInformation', 0)
				// sessionStorage.setItem('active_user',1)
				this.$router.push('/people')
			},
			//页签变化回调
			//  handleClick(tab, event) {
			//   console.log(tab, event);
			// }
		},

		watch: {},
		mounted() {
			//绑定事件
			window.addEventListener('keydown', this.keyDown);
		},

		//销毁事件
		destroyed() {
			window.removeEventListener('keydown', this.keyDown, false);
		}
	}
</script>
<style scoped>
	.content {
		width: 1440px;
		min-height: 300px;
		background-color: #fff;
		margin: 100px auto;
		/* position: relative; */
		margin-bottom: 24px;
		position: relative;
		z-index: 1;
	}

	.BlueBanner {
		/* clear:both; */
		background: url("../pic/6.png");
		/* background-color:#F7FF09; */
		/* background-size: 100%,100%; */
		width: 100%;
		height: 540px;
		background-repeat: no-repeat;
		margin: 0 auto;
		/* height: 128px; */
	}

	.card {
		height: 250px;
		background-color: #FFFFFF;
		width: 1300px;
		position: relative;
		/* left:300px; */
		top: -500px;
		height: 768px;
	}

	.login_img {
		margin-top: 60px;
		width: 550px;
		height: 650px;
	}

	.input1 {
		background-color: rgba(0, 0, 0, 0.08);
		width: 380px;
		height: 50px;
		border-radius: 8px;
		border: 2px solid white;
		font-family: Noto Sans SC;
		margin-top: 14px;
		font-size: 18px;

	}

	.Tips {
		/* width: 130px; */
		/* color: teal; */
		margin-bottom: 30px;

	}

	.one {
		font-family: Noto Sans SC;
		font-size: 20px;
		font-weight: 400;
		width: 600px;
		text-align: left;
		margin-left: 100px;
		margin-top: 40px;
	}

	.biaodan {
		font-size: 20px;
		font-weight: bold;
		margin-top: 120px;
		font-family: Noto Sans SC;
		/* background-color:teal; */
	}

	.btn1 {
		font-size: 24px;
		text-align: center;
		margin-left: 100px;
		width: 380px;
		height: 62px;
		font-family: Noto Sans SC;
		font-weight: 300;
		border-radius: 10px;
	}

	.title1 {
		text-align: center;
		margin-right: 55px;
		font-size: 42px;
		font-family: Noto Sans SC;
		font-weight: 500;
		line-height: 71px;

	}

	/* #selectform>>>.el-input__inner{
    font-family: Noto Sans SC;
    font-size: 30px;
  } */
	.main {
		min-height: 300px;
	}

	.register {
		text-align: left;
		font-size: 15px;
		width: 90px;
		height: 20px;
		margin: 25px 100px;
		cursor: pointer;
		transition-duration: 0.3s;
	}

	.register:hover {
		color: rgba(51, 170, 255, 1);
	}

	.container {
		position: relative;
		width: 380px;
		height: 71px;
		/* background-color: #f1f1f1; */
	}

	.container button {
		position: absolute;
		top: 30px;
		right: 0;
		background-color: absolute;
		border: none;
		outline: none;
	}

	.container button:hover {
		color: rgba(51, 170, 255, 1);
	}
</style>
